<template>
  <div class="app-container">

    <!-- 输入框 -->
    <el-input v-model="search.orderNo"  clearable style="width: 200px; padding-left: 5px; padding-top: 10px" size="medium"
      placeholder="请输入订单编号" />

    <!-- 四个选择框 -->
    <el-select v-model="search.tid" clearable  style="width: 200px; padding-left: 5px; padding-top: 10px" size="medium"
      placeholder="请选择学校">
      <el-option v-for="item in option" :key="item.tid" :label="item.enName" :value="item.tid" />
    </el-select>

    <el-select v-model="search.supplieId" clearable style="width: 200px; padding-left: 5px; padding-top: 10px" size="medium"
      placeholder="请选择供应商">
      <el-option v-for="item in suplierList" :key="item.id" :label="item.supplierName" :value="item.id" />
    </el-select>

    <!-- <el-select v-model="value" clearable style="width: 200px; padding-left: 5px; padding-top: 10px" size="medium"
      placeholder="请选择">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select> -->

    <el-select v-model="search.state" clearable style="width: 200px; padding-left: 5px; padding-top: 10px" size="medium"
      placeholder="请选择状态"> 
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>

    <br>

    <!-- 时间选择框 -->

    <el-date-picker v-model="search.startTime" clearable  style="width: 200px; padding-left: 5px; padding-top: 10px" type="datetime"
      size="medium" value-format="yyyy-MM-dd hh:mm:ss" placeholder="选择日期时间" />

    <span style="padding-left: 4px">至</span>

    <el-date-picker v-model="search.endTime" clearable  style="width: 200px; padding-left: 5px; padding-top: 10px" type="datetime"
      size="medium" value-format="yyyy-MM-dd hh:mm:ss" placeholder="选择日期时间" />

    <!-- 两个按钮 -->
    <el-button type="primary"  v-hasBtn="'order_search'" @click="searchList()" style="margin-left: 10px" size="medium" icon="el-icon-search">查找</el-button>
    <el-button type="primary" v-hasBtn="'order_expord'" @click="exportExcel" size="medium" icon="el-icon-download">导出</el-button>

    <!-- 表格 -->

    <el-table :data="tableData" style="width: 100%; margin-top: 20px" border
      :header-cell-style="{ 'text-align': 'center', 'font-size': '12px' }" :cell-style="{ 'text-align': 'center' }">
      <el-table-column type="expand" fixed>
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="收货人">
              <span>{{ props.row.consignee }}</span>
            </el-form-item>
            <el-form-item label="联系电话">
              <span>{{ props.row.phone }}</span>
            </el-form-item>
            <el-form-item label="收获地址">
              <span>{{ props.row.province }} / {{props.row.city}} / {{props.row.county}} / {{props.row.address}}</span>
            </el-form-item>
            <el-form-item label="订单调整">
              <span>{{ props.row.radio }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="主订单编号" prop="orderNo" width="170px" />
      <el-table-column label="子订单编号" prop="subOrder" width="170px" />
      <el-table-column label="所属学校" prop="schoolName" />
      <el-table-column label="订单状态" prop="state">
        <template slot-scope="scope">
          <el-popover>
            <div slot="reference" class="name-wrapper">
              <el-tag v-if="scope.row.state === 'received'" size="medium">已完成</el-tag>
              <el-tag v-if="scope.row.state === 'cancel'" size="medium">已取消</el-tag>
              <el-tag v-if="scope.row.state === 'unpay'" size="medium">未支付</el-tag>
              <el-tag v-if="scope.row.state === 'payed'" size="medium">已支付</el-tag>
              <el-tag v-if="scope.row.state === 'sended'" size="medium">已发货</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <!-- <el-table-column label="支付方式" prop="pay">
        <template slot-scope="scope">
          <el-popover>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.pay }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="收货人" prop="category" /> -->
      <!-- <el-table-column label="订单金额" prop="desc" /> -->
      <el-table-column label="创建时间" prop="createTime" />
      <el-table-column label="供应商" prop="supplierId">
          <template slot-scope="scope">
              <div v-for="item in suplierList">
                  <span v-if="scope.row.supplierId === item.id">{{ item.supplierName }}</span>
              </div>
          </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="primary" size="small" v-hasBtn="'order_detail'" @click="handleClick(scope.row)">详情</el-button>
          <!-- <el-button v-if="scope.row.state === '待发货'"  v-hasBtn="order_detail" type="primary" size="small" @click="open">发货</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->


    <el-pagination
    background
    style="margin-top: 10px"
    :page-sizes="[10, 20, 50, 100]"
    :current-page.sync="pagemenu.page.page"
    :page-size="pagemenu.page.pagesize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="totalCount"
    @size-change="handleSizeChange"
    @next-click="handleNextChange"
    @prev-click="handlePrevClick"
    @current-change="handleCurrentChange"
  />

    <!-- 详情页弹窗 -->

    <el-dialog title="详细信息" :visible.sync="dialogTableVisible">
      <el-form ref="form" :model="detailDate" :inline="true" label-width="100px" label-position="left"
        style="font-size: 12px" class="demo-table-expand">
        <el-form-item label="订单编号">
          <span>{{ detailDate.orderNo }}</span>
        </el-form-item>
        <el-form-item label="订单状态">
          <span>{{ detailDate.state }}</span>
        </el-form-item>
        <el-form-item label="创建时间">
          <span>{{ detailDate.createTime }}</span>
        </el-form-item>
        <el-form-item label="用户所属学校">
          <span>{{ detailDate.schoolName }}</span>
        </el-form-item>
        <el-form-item label="供货方">
            <div v-for="item in suplierList">
                <span v-if="detailDate.supplierId === item.id">{{ item.supplierName }}</span>
            </div>
        </el-form-item>
        <el-form-item label="订单金额">
          <span>{{ detailDate.voPrice }}</span>
        </el-form-item>
        <!-- <el-form-item label="支付方式">
          <span>{{ detailDate.name }}</span>
        </el-form-item> -->
        <!-- <el-form-item label-width="140px" label="账户余额支付金额">
          <span>{{ detailDate.pay }}</span>
        </el-form-item> -->
        <!-- <el-form-item label="用户留言">
          <span>{{ detailDate.userMessage }}</span>
        </el-form-item> -->
        <!-- <el-form-item label="订单调整">
          <span>{{ detailDate.radio }}</span>
        </el-form-item> -->
        <el-form-item label="收货人">
          <span>{{ detailDate.consignee }}</span>
        </el-form-item>
        <el-form-item label="收货人手机号">
          <span>{{ detailDate.phone }}</span>
        </el-form-item>
        <el-form-item label="收货人地址">
          <span>{{ detailDate.province }} / {{detailDate.city}} / {{detailDate.county}} / {{detailDate.address}}</span>
        </el-form-item>
      </el-form>

      <el-table :data="tableData2" border="border">
        <el-table-column label="名称" prop="title"/>
        <el-table-column label="商品数量" prop="num" />
        <el-table-column label="单位" prop="unit" />
        <el-table-column label="总价" prop="voPrice" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
   import FileSaver from "file-saver";
  import * as XLSX from "xlsx";
  export default {
 
    data() {
      return {
        search:{
          state: '',
          orderNo: '',
          tid: '',
          supplieId: '',
          startTime: '',
          endTime: ''
        },
        totalCount: 0,
        totalPages: '',
        pagemenu:{
          page:{
            page: 1,
            pageSize: 10
          },
        },
        dialogTableVisible: false,
        detailDate: {},
        tableData2: [{
          title: '名称',
          num: 1,
          unit: 'KG',
          price: '14.68'
        }],
        suplierList:[{}],
        tableData: [{}],
        input: '',
        option: [],
        options: [{
            value:  'unpay',
            label: '未支付'
          },
          {
            value:  'payed',
            label: '已支付'
          },
          {
            value:  'received',
            label: '已收货'
          },
          {
            value:  'cancel',
            label: '取消'
          },
        ],
        value: '',
        startTime: '',
        endTime: ''
      }
    },

    created() {
      this.getList()
      this.getsuperList()
      this.getSchoolList()
    },

    methods: {


      getSchoolList(){
          this.$request({
            url: '/school/list',
            method: 'post',
            data: {
              page:{
                page: 1,
                pageSize: 1000
              }
            }
          }).then(res => {
              if (res.success){
                this.option = res.data
              }
          })
      },


      searchList(){


              if (this.search.orderNo === '' && this.search.state === '' && this.search.tid === '' && this.search.supplieId === '' && this.search.startTime === '' &&  this.search.endTime.length === ''){
                this.getList()
              } else {
                let data = {
                relation:{
                  conditions:[]
                }
              }

              if (this.search.orderNo){
                  data.relation.conditions.push({
                    colName: 'order_no',
                    ruleType: 'eq',
                    value: this.search.orderNo
                  })
              }

              if (this.search.state){
                  data.relation.conditions.push({
                    colName: 'state',
                    ruleType: 'eq',
                    value: this.search.state
                  })
              }

              if (this.search.tid){
                  data.relation.conditions.push({
                    colName: 'tid',
                    ruleType: 'eq',
                    value: this.search.tid
                  })
              }

              if (this.search.supplieId){
                  data.relation.conditions.push({
                    colName: 'supplier_id',
                    ruleType: 'eq',
                    value: this.search.supplieId
                  })
              }

              if (this.search.startTime){
                  data.relation.conditions.push({
                    colName: 'create_time',
                    ruleType: 'GE',
                    value: this.search.startTime
                  })
              }

              if (this.search.endTime){
                  data.relation.conditions.push({
                    colName: 'create_time',
                    ruleType: 'LE',
                    value: this.search.endTime
                  })
              }

             

              this.$request({
                  url: '/order/list',
                  method: 'post',
                  data: {
                    page: {
                      page: 1,
                      pageSize: 10
                    },
                    order:[{
                        colName: 'order_no',
                        orderType: '',
                    }],
                    relation: data.relation
                  }
              }).then(res => {
                    this.tableData = res.data
                    this.totalCount = res.totalCount
                    this.totalPages = res.totalPages
              })
              }

},







   


      exportExcel() {
      // 设置当前日期
      let time = new Date();
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      let name = year + "" + month + "" + day;
      // console.log(name)
      /* generate workbook object from table */
      //  .table要导出的是哪一个表格

      let data = {
                relation:{
                  conditions:[]
                }
              }

              if (this.search.orderNo){
                  data.relation.conditions.push({
                    colName: 'order_no',
                    ruleType: 'eq',
                    value: this.search.orderNo
                  })
              }

              if (this.search.state !== ''){
                  data.relation.conditions.push({
                    colName: 'state',
                    ruleType: 'eq',
                    value: this.search.state
                  })
              }

              if (this.search.tid !== ''){
                  data.relation.conditions.push({
                    colName: 'tid',
                    ruleType: 'eq',
                    value: this.search.tid
                  })
              }

              if (this.search.supplieId !== ''){
                  data.relation.conditions.push({
                    colName: 'supplier_id',
                    ruleType: 'eq',
                    value: this.search.supplieId
                  })
              }

              if (this.search.startTime.length > 0){
                  data.relation.conditions.push({
                    colName: 'create_time',
                    ruleType: 'GE',
                    value: this.search.startTime
                  })
              }

              if (this.search.endTime.length > 0){
                  data.relation.conditions.push({
                    colName: 'create_time',
                    ruleType: 'LE',
                    value: this.search.endTime
                  })
              }

      this.$request({
          url: 'order/export',
          method: 'post',
          data: {
            page:{
              page: 1,
              pageSize: 10000
            },
            order:[{
                colName: 'order_no',
                orderType: '',
            }],
            relation: data.relation
          },
          responseType: 'blob'
      }).then(res => {
          var eleLink = document.createElement('a');
          eleLink.download = '订单列表.xlsx';
          eleLink.style.display = 'none';

          var blob = new Blob([res])
          eleLink.href = window.URL.createObjectURL(blob);

          document.body.appendChild(eleLink);
          eleLink.click();
          document.body.removeChild(eleLink);
      })
    },
  


      getsuperList(){
       this.$request({
           url: '/supplier/lists',
           method: 'post',
           data:{
             page: {
               page: 1,
               pageSize: 1000
             }
           }
       }).then(res => {
           if (res.success){

               this.suplierList = res.data
           }
       })
   },


      handleCurrentChange(val) {
      this.pagemenu.page.page = val
      this.getList()
    },

    handlePrevClick(val) {
      this.pagemenu.page.page = val
      this.getList()
    },

    handleNextChange(val) {
      this.pagemenu.page.page = val
      this.getList()
    },

    handleSizeChange(val) {
      this.pagemenu.page.pageSize = val
      this.getList()
    },



      getList(){
       this.$request({
           url: '/order/list',
           method: 'post',
           data: this.pagemenu
       }).then(res => {
           if (res.success){
               this.tableData = res.data
               this.totalCount = res.totalCount
               this.totalPages = res.totalPages
           }
       })
   },


      open() {
        this.$confirm('确定该商品已经发货了?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            this.$notify({
              title: '成功',
              type: 'success',
              message: '发货成功'
            })
          })
          .catch(() => {

          })
      },

      handleClick(val) {
        console.log(val)
        this.detailDate = val
        var arr = []
        arr.push(val)
        this.tableData2 = arr
        this.dialogTableVisible = true
      },

      onSubmit() {
        this.$message('submit!')
      },
      onCancel() {
        this.$message({
          message: 'cancel!',
          type: 'warning'
        })
      }
    }
  }

</script>

<style scoped>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

</style>

